<template>
  <div class="bottom-menu">
    <template v-for="route in routes">
      <router-link
        v-if="!route.hidden&&(route.path!='/'||route.name!='Home')"
        :key="route.path"
        :to="route.path"
        class="bottom-menu-item"
      >
        <el-tooltip class="item" effect="dark" :content="route.meta.title" placement="top">
          <img :src="route.meta.icon">
        </el-tooltip>
      </router-link>
    </template>
    <el-tooltip class="item" effect="dark" content="退出登录" placement="top">
      <i class="el-icon-switch-button" style="margin-left: 10px;font-size: 25px;font-weight: 600;color: red" @click="logout" />
    </el-tooltip>
  </div>
</template>

<script>

export default {
  name: 'BottomMenu',
  computed: {
    routes() {
      // return this.$router.options.routes
      return this.$store.getters.permission_routes
    }
  },
  methods: {
    logout() {
      this.$confirm('是否退出登录?', '提示', {
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('user/resetToken').then(() => {
          location.href = '/'
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .bottom-menu {
    position: absolute;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    /*bottom: 55px;*/
    bottom: 5px;
    height: 50px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    opacity: 0.8;
    border-radius: 18px;
    padding: 0 10px;
    .bottom-menu-item {
      margin: 5px 10px 0 10px;
      cursor: pointer;

      img {
        width: 25px;
        height: 25px;
      }
    }
  }
</style>
